<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<link rel="stylesheet" href="./css/h.css" />
<!--[if lt IE 9]>
<script src="./js/respond.min.js"></script>
<![endif]-->
</head>

<body>
<div class="rowo">
	<div class="fillo">
<h1>Tuding布局思考</h1>
<hr />
<h2>Tuding设计思想</h2>
<p>各式各样的网页设计，通常只需进行2次3列以内的拆分，就可到达最终要显示的模块区域。</p>
<p>除了通常的情况，还有一些特殊的超过3列的多列平均拆分、或不平均的拆分，Tuding借鉴YUI栅格做了特殊处理，也完善了其功能。</p>
<p>Tuding擅长的3列拆分，并不只是拆分，还可以自由调整3列的排布顺序。可以说，Tuding再造了一个CSS禅意花园。</p>
<p>Tuding同时考虑到了原始文档流顺序的区别，无论原始文档流是L型、T型、7型，Tuding都有对应的解决方案。</p>
<p>Tuding可以方便的套用在不同的内容管理系统（CMS）之上，并展现其能力。</p>
<p>Tuding包含全系列浏览器兼容的解决方案。</p>
<p>Tuding是小巧、高效的，仅3kb核心源代码，展现强大功能。</p>

<h2>兼容性</h2>
<p>Fixed（定宽）布局、Hybrid（混合）布局兼容包括IE6在内的当前主流浏览器。</p>
<p>Liquid（全变宽）布局百分比的宽度计算，在IE6和IE7中，分数除不尽时会因为子元素总宽度超出很小的几像素而发生折行现象。960px是个可被除尽的分母，但子列不一定仍能被除尽，这一点需格外注意。</p>

<h2>是否有必要从"三列普遍设置"直接附加"二列变形特殊区域"变换？？？</h2>
<p>没必要，有现成的两列布局可用，现成的两列布局使用起来更加便利。</p>
<p>如果有修改HTML结构的权限，那么可以方便地应用三列布局子集实现两列。</p>
<p>只有提供完整属性才能够用于该变换，但完整属性的使用范围较为局限。</p>
<h2>为什么没用类似.clr{clear:right;}，而是像这样.xcr{clear:right;}的命名？</h2>
<p>.clr在一些应用中是clear的缩写，如VirtueMart中.clr{clear:both;overflow:hidden;}</p>

<h2>为什么有时动态列宽度前要加“.rowo ”？</h2>
<p>动态列宽“.rowo .w-1-24{}”才有权限改变“.nm .n1{}”，而“.w-1-24”不能改变“.nm .n1{}”。</p>

<h2>同一区域有多个水平分布的模块尽量使用双层外套</h2>
<p>这意味着对现有区域的二次拆分</p>
<p>确保任何最终模块都有2层外套，除非模块内的内容恒为1列（或者区域内只有一个模块）。通常除了“component”区域，没有哪个区域是恒为1列的。</p>
<p>外层外套，通常仅用于计算宽度，禁止定义其x方向的margin、padding、border，换言之仅可以定义其纵向的margin、padding、border。</p>
<p>内层外套，可通过它的margin值定义空隙。</p>
</div></div>
</body>
</html>
